<template>
  <div class="hello">
  <div class='a'>
    <div class='left'>左侧</div>
    <div class='right'>右侧</div>
  </div>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你好，Python_Word'
    }
  },
  methods: {
    parent(){
      console.log('000000')
      var child = new Object()
      child.name = 'lalal'
      child.age = '12'
      return child
      console.log()
    },
    test(){
      var x = this.parent()
      console.log(x)
    },
    a(){
      var dataA = {
        name: '你好',
        age: '12',
        set:function set(params) {
          console.log('发送')
        },
        get:function get() {
          console.log('拿到')
        }
      }
      // console.log(dataA.set())
    }
  },
  mounted() {
    this.a()
  },
  created() {
    this.test()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .a {
  height: 100px
} */
/* .left {
  float: left;
  height:100%;
  width: 200px;
  background: red;
}
.right {
  margin-left:200px;
  height: 100%;
  background:green
} */
/* .left {
  float:left;
  width:200px;
  height:100%;
  background:red;
}
.right {
  overflow:auto;
  height:100%;
  background:green;
} */
/* .a {
  display:flex;
  height:100px;
}
.left {
  width:200px;
  height:100%;
  background:red;
}
.right {
  flex:1;
  height:100%;
  background:green;
} */
/* .a {
  position:relative;
  height: 100%;
}
.left {
  position:absolute;
  width:200px;
  height:100%;
  background:red;
}
.right {
  margin-left:200px;
  height:100%;
  background:green;
} */

.a {
  position: relative;
  height: 100%;
}
.left {
  width:200px;
  height: 100%;
  background:red;
}
.right {
  position:absolute;
  left:200px;
  right:0;
  top:0;
  bottom:0;
  height:100%;
  background:green;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
